<template>
	<view class="padding36">
		<view class="mb20">
			退房日期 <span class="grey-s-tips ml20">原退房日期 {{orderData.end_date}}</span>
		</view>
		<input @click="showTimeSelect" disabled class="my-select-class mb40" type="text" v-model="formData.end_date"
			placeholder="请选择" />

		<view class="mb20">
			备选说明
		</view>
		<input maxlength="200" class="my-select-class mb50" type="text" v-model="formData.checkout_remark"
			placeholder="选择,请输入" />

		<view class="center-all ">
			<view @click="confirmOrder" class="ml20  my-yellow-btn ">确 定</view>
		</view>

		<view class="money-tips">
			<view>温馨提示:</view>
			<view class="tips-item">
				<span>1.</span>
				<span> 修改退房日期后，不可再修改 </span>
			</view>
			<view class="tips-item">
				<span>2.</span>
				<span>押金将按照新的退房日期返回原账户</span>
			</view>
		</view>

		<van-popup :show="visible" class="login-confirm" round position="bottom"
			custom-style="padding: 20rpx 35rpx 41rpx;">
			<van-datetime-picker type="date" title="选择日期" :min-date="minDate" :max-date="maxDate" :value="currentTime"
				@confirm="confirm" @cancel="visible = false" />
		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visible: false,
				currentTime: new Date().getTime(),
				minDate: '',
				maxDate: '',
				orderData: this.$getStorage('orderData'),
				formData: {
					order_number: '',
					end_date: '',
					checkout_remark: ''
				},
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				let endDate = this.orderData.end_date.replace(/-/g, "/");
				this.minDate = new Date().getTime();
				this.maxDate = new Date(endDate).getTime();
			},
			showTimeSelect() {
				this.visible = true;
			},
			confirm(data) {
				this.visible = false;
				this.currentTime = data.detail;
				this.formData.end_date = this.$timestampToTime(this.currentTime);
			},
			confirmOrder() {
				this.formData.order_number = this.orderData.order_number;
				this.$http.checkoutOrder(this.formData).then(res => {
					this.$toast('操作成功');
					uni.navigateBack({
						delta: 1,
						success: function() {
							// 触发事件，通知上一页刷新数据
							uni.$emit('refreshOrderData');
						}
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	.my-yellow-btn {
		width: 678rpx;
	}

	.money-tips {
		width: 100%;
		font-size: 27rpx;
		margin-top: 100rpx;
		// height:  220rpx;
		color: #666;
		display: inline-block;

		.tips-item {
			display: flex;

			span {
				display: inline-block;
				vertical-align: top;
			}
		}
	}
</style>